<template>
  <view>
    <view class="buy_goods_card">
    	<image class="goods_picture" :src="buy_goods.picture" mode="aspectFit"></image>
		<view class="goods-pannel">
			<view class="goods_price">
				¥ {{buy_goods.sale_price}} | H {{buy_goods.coin_price}}
			</view>
			<view class="goods_title">
				<view class="notice">
					已选择
				</view>
				<view class="name">
					{{buy_goods.spuName}} {{buy_goods.skuName}}
				</view>
			</view>
			<view class="number_action">
				<view class="action_item" @tap="handleToSubNumer()">
					－
				</view>
				<view class="buy_number">
					{{buy_goods.buy_number}}
				</view>
				<view class="action_item" @tap="handleToAddNumber()">
					＋
				</view>
			</view>
		</view>
    </view>
	<view v-if="buy_goods.goodsSkuArray.length && buy_goods.goods_sku_id" class="goods_sku_list">
		<view class="title-block"/>
		<view class="sku_title">
			<view class="sku_title_card" />
			<view class="title">
				规格
			</view>
		</view>
		<view class="sku_item_list">
			<view v-for="(skuItem,index) in buy_goods.goodsSkuArray" :key="index"  :class="{skuItem:true, selectSkuItem:isSelectSkuItem(index)}" @tap="handleToSelectSku(skuItem,index)">
				<view class="skuName">
					{{ skuItem.goods_sku }}
				</view>
				<view class="price">			
					¥ {{skuItem.sale_price }} | H {{skuItem.coin}}
				</view>
			</view>
		</view>
		<view class="sku-block" />
	</view>
  </view>
</template>
<script>
  export default
  {
    // 组件名称
    name: 'order-goods-card',
    // 组件
    components:
      {
      },
    props:
      {
      },
    // 数据
    data()
      {
        return {
          msg: 'order-goods-card',
		  buy_goods:{
			  goods_id:0,
			  goods_sku_id:0,
			  sale_price:'0.00',
			  coin_price:'0.00',
			  picture:null,
			  spuName:'',
			  skuName:'',
			  selectSkuItem:null,
			  goodsSkuArray:[],
			  //选中的skuIndex
			  selectSkuIndex:null,
			  //购买数量默认为1
			  buy_number:1,
		  }
		  
        }
      },
    // 计算属性
    computed:
      {
      },
    // 监听
    watch:
      {
      },
    // 实例创建之前
    beforeCreate()
      {
      },
    // 创建
    created()
      {
		  
      },
    // 挂载之前
    beforeMount()
      {
      },
    // 挂载 --常用
    mounted()
      {
		 const _this = this
		 uni.$once('toBuyGoods',function(data)
		 {
		 	//console.log(data)
			
			_this.$set(_this.buy_goods,'goods_id',data.goods_id)
			_this.$set(_this.buy_goods,'goods_sku_id',data.goods_sku_id)
			_this.$set(_this.buy_goods,'picture',data.picture)
			_this.$set(_this.buy_goods,'sale_price',data.sale_price)
			_this.$set(_this.buy_goods,'coin_price',data.coin_price)
			_this.$set(_this.buy_goods,'spuName',data.spuName)
			_this.$set(_this.buy_goods,'skuName',data.skuName)
			
			if(data.selectSkuIndex !== null)
			{
				_this.$set(_this.buy_goods,'goodsSkuArray',data.goodsSkuArray)
				_this.$set(_this.buy_goods,'selectSkuIndex',data.selectSkuIndex)
			}
			
		 })
		
      },
    // 更新之前
    beforeUpdate()
      {
      },
    // 跟新后
    updated()
      {
      },
    // 销毁之前
    beforeDestroy()
      {
      },
    // 销毁后
    destroyed()
      {
		//uni.$off('toBuyGoods')
      },
    // 方法
    methods:
    {
		//是否选中
		isSelectSkuItem(index)
		{
			let result = false
			
			if(index === this.buy_goods.selectSkuIndex)
			{
				result = true
			}
			
			return result
		},
		//添加数量
		handleToSubNumer()
		{
			if(this.buy_goods.buy_number > 1)
			{
				this.buy_goods.buy_number = this.buy_goods.buy_number -1 ;
			}
			this.sendBuyGoods()
			
		},
		//减少数量
		handleToAddNumber()
		{
			this.buy_goods.buy_number = this.buy_goods.buy_number + 1;
			this.sendBuyGoods()
		},
		//选择sku
		handleToSelectSku(skuItem,index)
		{
			console.log(skuItem)
			// console.log(index)
			this.buy_goods.selectSkuIndex = index
			this.buy_goods.goods_sku_id = skuItem.goods_sku_id
			this.buy_goods.picture = skuItem.sku_picture_array[0].picture
			this.buy_goods.sale_price = skuItem.sale_price
			this.buy_goods.coin_price = skuItem.coin
			this.buy_goods.skuName = skuItem.skuName
			
			this.sendBuyGoods()
		},
		//发送推送消息
		sendBuyGoods()
		{
			this.$nextTick(()=>{
				uni.$emit('prepareGoods',this.buy_goods)
			})
		}
    }
  }
</script>
<style lang='scss' scoped>
.buy_goods_card{
	width: 670rpx;
	height: auto;
	margin:0 auto;
	margin-top: 40rpx;
	background: #FFFFFF;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
	border: 1rpx solid #F1F1F1;
	display: flex;
	flex-direction: row;
	.goods_picture{
		width: 240rpx;
		height:160rpx; 
		margin-top: 24rpx;
		margin-left: 20rpx;
		margin-right: 32rpx;
	}
	.goods-pannel{
		width: 100%;
		height:auto;
		margin-top: 24rpx;
		.goods_price{
			height: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 24rpx;
			color: #FF530A;
			line-height: 32rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
		.goods_title{
			marign-top:14rpx;
			display: flex;
			flex-direction: row;
			.notice{
				height: 36rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #848FAC;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			.name{
				margin-left: 20rpx;
				height: 36rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #000000;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
		.number_action{
			display: flex;
			flex-direction: row;
			margin-top: 30rpx;
			.action_item{
				width: 48rpx;
				height: 48rpx;
				background: #E8F3FF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 1rpx solid #BEDAFF;
				font-size: 38rpx;
				color: #6FBAFF;
				text-align: center;
				line-height: 48rpx;
			}
			.buy_number{
				margin-left:10rpx;
				margin-right:10rpx;
				min-width: 48rpx;
				width: auto;
				height: 48rpx;
				font-size: 28rpx;
				color: #000000;
				text-align: center;
				line-height: 48rpx;
			}
		}
	}
}
.goods_sku_list{
		width: 670rpx;
		height:auto;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 0rpx 0rpx;
		margin-left:40rpx;
		margin-top: 20rpx;
		.title-block{
			width: 100%;
			height:40rpx;
		}
		.sku_title{
			width: auto;
			height:28rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			.sku_title_card{
				width: 6rpx;
				height: 28rpx;
				background: linear-gradient( 360deg, #0D8CE9 0%, #0074FD 100%);
			}
			.title{
				margin-left: 20rpx;
				height:28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 30rpx;
				color: #4E5969;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
		.sku_item_list{
			width:618rpx;
			height:auto;
			margin-top: 20rpx;
			margin-left: 26rpx;
			background: #FFFFFF;
			.skuItem{
				width: auto;
				height: 56rpx;
				background: rgba(241,241,241,0.5);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 1rpx solid #F1F1F1;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #4E5969;
				line-height: 56rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				margin-bottom: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.skuName{
					margin-left: 22rpx;
				}
				.price{
					margin-right: 24rpx;
				}
			}
			.selectSkuItem{
				background: rgba(255,83,10,0.1);
				border: 1rpx solid #FF530A;
				color: #FF530A;
			}
		}
		.sku-block{
			width: 100%;
			height: 8rpx;
			/* background-color: blue; */
			
		}
	}

</style>